<template>
	<p>toRefs demo {{ age }} {{ name }}</p>
</template>

<script>
	// 引入响应式数据API
	// ref=值响应式 reactive=对象响应式
	// toRef=从响对中分离响值
	// toRefs=将响对一股脑分离为响值
	import { ref, toRef, toRefs, reactive } from "vue";

	export default {
		name: "ToRefs",

		/* 【组合式API】= created后立即执行 */
		setup() {
			const state = reactive({
				age: 20,
				name: "steve",
			});

			setTimeout(() => {
				state.age = 25;
			}, 2000);

			// 将响应式对象打散为一堆值的refs
			return toRefs(state);
		},
	};
</script>